<!-- 账号列表 -->
<template>
  <div>
    <!-- 列表 -->
    <el-card class="card">
      <ELTable v-bind="tableConfig" ref="nursingTable">
        <template #btns="{ deleteAll }">
          <el-button type="primary" @click="add">
            <el-icon class="icon">
              <Plus />
            </el-icon>
            新增
          </el-button>

          <el-button :icon="Delete" type="danger" @click="deleteAll">批量删除</el-button>
        </template>

        <template #operate="{ scope, deleteHandle }">
          <el-button type="primary" :icon="Edit" text @click="uploadEdit(scope.row)">
            编辑
          </el-button>

          <el-button type="danger" :icon="Delete" text @click="deleteHandle(scope.row.id)">
            删除
          </el-button>
        </template>
      </ELTable>
      <!-- 添加 -->
      <accountAdd
        v-if="dialogVisible"
        v-model="dialogVisible"
        :listParams="listParams"
        @close="handelClose"
      />
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import { delCompany, delMany, getCompanyList, addcountgUpdate } from "@/api/system/Account/Account";
import ELTable, { TableData } from "@/components/ELTable.vue";
import { accountAddParams } from "@/api/system/Account/type";
import accountAdd from "@/components/Account/AccountAdd.vue";
import { Delete, Edit, Message, Document, Search, Refresh } from "@element-plus/icons-vue";
const dialogVisible = ref(false);
let listParams = reactive<accountAddParams>({
  id: 0,
  companyId: 0,
  level: 0,
  staffId: 0,
  name: "",
  pwd: "",
  type: 0,
  enable: "",
  photo: "",
  mobile: "",
  username: "",
});
// 添加
const add = () => {
  listParams = {
    id: 0,
    companyId: 0,
    level: 0,
    staffId: 0,
    name: "",
    pwd: "",
    type: 0,
    enable: "",
    photo: "",
    mobile: "",
    username: "",
  };
  dialogVisible.value = true;
};
// 关闭弹框
const nursingTable = ref();
const handelClose = () => {
  dialogVisible.value = false;
  nursingTable.value.getData();
};

// 编辑
const uploadEdit = (data: accountAddParams) => {
  listParams = data;
  dialogVisible.value = true;
};

const tableConfig = reactive<TableData>({
  loadData: getCompanyList,
  delete: delCompany,
  deleteAll: delMany,
  columns: [
    {
      prop: "id",
      label: "序号",
    },
    {
      prop: "name",
      label: "姓名",
    },
    {
      prop: "mobile",
      label: "手机号",
    },
    {
      prop: "username",
      label: "账号",
    },
    {
      prop: "pwd",
      label: "密码",
    },

    {
      prop: "operate",
      label: "操作",
      slot: true,
    },
  ],
});
</script>
<style scoped>
.card {
  margin: 10px;
}
</style>
